<script setup lang="ts">
	import { computed, reactive, ref } from "vue";
	import { querySignupDetail } from "@/api/team";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { formValidate, msg } from "@/utils/tools";
	import { changeSignUp } from "@/api/match";
		import inputNumber from '@/components/inputNumber/inputNumber.vue' 
		import { clothesSize } from "@/utils/basicData";

	const state = reactive({
		model: {},
		editing: false,
		isLdJl: false,
	});
	onLoad((options) => {
		state.isLdJl = options.flag;
		getPersonInfo((options.regId));
	})
	const getPersonInfo = async (id) => {
		const res = await querySignupDetail({ regId: id });
		console.log(res);
		state.model = res.data;
	}

	const isShow = computed(() => {
		return state.model.regType == "SPORTS_MAN";
	})

	const translateRegType = (type) => {
		switch (type) {
			case "LEAD":
				return "领队";
			case "COACHS":
				return "教练";
			case "ASSISTANT_COACH":
				return "助理教练";
			case "SPORTS_MAN":
				return "运动员";
		}
	}

	const showFooter = computed(() => {
		// 领队或教练， regType==运动员， 未审核或审核未通过， 
		return state.isLdJl && isShow.value && (state.model.examineState == "UNDER_REVIEW" || state.model.examineState == "REVIEW_FAILED")
	})

	const handleEdit = () => {
		state.editing = true;
	}
	const signFromRule = {
		height: { message: '请输入身高' },
		weight: { message: '请输入体重' },
		clothingSize: { message: '请选择衣服尺码' },
		uniformNumber: { message: '请输入球衣号码' },
	}
	const handleOK = async () => {
		const formDataInfo = JSON.parse(JSON.stringify(state.model))
		formDataInfo.uniformNumber = Number(state.model.uniformNumber)
		let rules : any = signFromRule;
		await formValidate(state.model, rules)

		changeSignUp(formDataInfo).then(res => {
			if (res.code == 200) {
				msg("修改成功");
				state.editing = false;
			}
		})
	}
	const imgShow = ref(false);
	const openSize = () => {
		imgShow.value = true
	}
</script>

<template>
	<view class="person-info">
		<xx-title title="个人信息" />
		<view class="person-info-body">
			<view class="certification-title">个人基本信息</view>
			<view class="person-info-box">
				<view class="person-info-item">
					<view class="info-item-label">报名类型：</view>
					<view class="info-item-value">{{translateRegType(state.model.regType)}}</view>
				</view>
				<view class="person-info-item">
					<view class="info-item-label">姓名：</view>
					<view class="info-item-value">{{state.model.competeName}}</view>
				</view>
				<view class="person-info-item">
					<view class="info-item-label">性别：</view>
					<view class="info-item-value">
						{{state.model.sex=="MAN"?"男":"女"}}
					</view>
				</view>
				<view class="person-info-item">
					<view class="info-item-label">身份证号码：</view>
					<view class="info-item-value">
						{{state.model.idCard}}
					</view>
				</view>
				<view v-if="state.editing" class=" ">
					<view v-if="isShow" class="sign-item">
						<view class="sign-label required">球员号码</view>
						<view class="sign-value">
							<input type="text" v-model="state.model.uniformNumber" placeholder="请输入球员号码" />
						</view>
					</view>
					<view v-if="isShow" class="sign-item center">
						<view class="sign-label required">身高(cm)</view>
						<view class="sign-value">
							<input-number v-model="state.model.height" unit="cm" :negative="true" />
						</view>
					</view>

					<view v-if="isShow" class="sign-item center">
						<view class="sign-label required">体重(kg)</view>
						<view class="sign-value">
							<input-number v-model="state.model.weight" unit="kg" :negative="true" />
						</view>
					</view>
					<view v-if="isShow" class="sign-item">
						<view class="sign-label required">衣服尺码</view>
						<view class="sign-value">
							<uni-data-select v-model="state.model.clothingSize" :localdata="clothesSize"
								placeholder="请选择衣服尺码"></uni-data-select>
						</view>

					</view>
					<view v-if="isShow" class="check-btn" @click="openSize">查看尺码表</view>
				</view>
				<view v-else class="">
					<view v-if="isShow" class="person-info-item">
						<view class="info-item-label">球员号码：</view>
						<view class="info-item-value">
							{{state.model.uniformNumber}}
						</view>
					</view>
					<view v-if="isShow" class="person-info-item">
						<view class="info-item-label">身高：</view>
						<view class="info-item-value">
							{{state.model.height}}cm
						</view>
					</view>
					<view v-if="isShow" class="person-info-item">
						<view class="info-item-label">体重：</view>
						<view class="info-item-value">
							{{state.model.weight}}kg
						</view>
					</view>
					<view v-if="isShow" class="person-info-item">
						<view class="info-item-label">衣服尺码：</view>
						<view class="info-item-value">
							{{state.model.clothingSize}}
						</view>
					</view>
				</view>

			</view>
			<view class="person-info-box">
				<view class="person-info-item">
					<view class="info-item-label">联系电话：</view>
					<view class="info-item-value">{{state.model.phone}}</view>
				</view>
				<view class="person-info-item">
					<view class="info-item-label">紧急联系人：</view>
					<view class="info-item-value">
						{{state.model.emContact}}
					</view>
				</view>
				<view class="person-info-item">
					<view class="info-item-label">紧急联系人电话：</view>
					<view class="info-item-value">
						{{state.model.emPhone}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<up-overlay :show="imgShow" @click="imgShow = false">
		<view class="wrap">
			<view class="rect" @tap.stop>
				<image class="size-img" :src="`${$Prefix}/mini/static/icons/chima.png`" mode="widthFix" />
			</view>
		</view>
	</up-overlay>
	<view v-if="showFooter" class="bottom-btn" :style="{paddingBottom:`calc(${bottomPadding}px + 14rpx)`}">
		<view v-if="state.editing" class="btn">
			<view class="personal-registration" @click="handleOK()">提交</view>
		</view>
		<view v-else class="btn">
			<view class="personal-registration" @click="handleEdit()">修改报名信息</view>
		</view>
	</view>
</template>

<style scoped lang="scss">
	.person-info {
		background-color: #F5F5F5;
		padding: 20rpx;
		box-sizing: border-box;
		min-height: 100vh;

		.certification-title {
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
			color: #FFFFFF;
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			border-radius: 8rpx 8rpx 16rpx 16rpx;
			background: linear-gradient(270deg, #92C75B 0%, #89BA55 100%);

			text {
				font-size: 28rpx;
				margin: 0 10rpx;
			}

			.is-audio {
				background-color: linear-gradient(270deg, #f31919 0%, #cb0202 100%);
			}
		}

		.person-info-body {
			padding: 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 8rpx 8rpx;

			.certification-tips {
				display: flex;
				align-items: center;
				justify-content: center;

				text {
					font-size: 28rpx;
				}
			}

			.person-info-box {
				margin-top: 20rpx;
				background-color: #F7F7F7;
				padding: 20rpx 24rpx;
				border-radius: 16rpx;

				.person-info-item {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding-bottom: 20rpx;

					&:last-child {
						padding-bottom: 0;
					}

					.info-item-label {
						color: #505363;
						font-size: 24rpx;
					}

					.info-item-value {
						color: #505363;
						font-size: 24rpx;

						image {
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
						}
					}
				}
			}

			.certification-btn {
				margin-top: 20rpx;
				padding-top: 40rpx;
				border-top: 1rpx solid #F5F5F5;
				display: flex;
				justify-content: center;
				align-items: center;

				&:last-child {
					border-right: none;
				}

				.btn-item {
					width: calc(100% / 3);
					text-align: center;
					border-right: 1px solid #F7F7F7;

					&:last-child {
						border-right: none;
					}

					image {
						width: 30rpx;
					}

					.title {
						color: #818496;
						font-size: 24rpx;
					}
				}
			}
		}
		
		.sign-item {
			padding: 24rpx 0;
			display: flex;
			position: relative;
			align-items: center;
			border-bottom: 1px solid #F5F5F5;
		
			&.start-item {
				align-items: flex-start;
			}
		
			&:last-child {
				border-bottom: none;
			}
		
			.tips {
				position: absolute;
				right: 0rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: normal;
				font-size: 28rpx;
				color: rgba(51, 51, 51, 0.4);
				line-height: 36rpx;
				text-align: right;
				font-style: normal;
			}
		
			.sign-label {
				color: #505363;
				font-size: 28rpx;
				width: 160rpx;
		
				&.required {
					position: relative;
					padding-left: 20rpx;
		
					&:before {
						content: '*';
						display: block;
						position: absolute;
						color: #ff3c3c;
						top: 0;
						left: 0;
					}
				}
			}
		
			.sign-value {
				width: calc(100% - 160rpx);
				font-size: 28rpx;
				color: #21252E;
				font-weight: 500;
		
				input {
					width: 100%;
					font-weight: 500;
				}
		
				textarea {
					background-color: #F7F7F7;
					border-radius: 12rpx;
					box-sizing: border-box;
					font-weight: 500;
					width: 100%;
					padding: 10rpx;
					height: 150rpx;
				}
			}
		}
	}
	.check-btn {
		color: #1677FE;
		font-size: 28rpx;
		text-align: right;
		padding-top: 10rpx;
	}
	
	.size-img {
		width: 100%;
		top: 500rpx;
		position: absolute;
	}
	
	.bottom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-left: 28rpx;
		padding-right: 28rpx;
		box-sizing: border-box;
		border-top: 1px solid #F1F2F4;
		padding-top: 14rpx;
		z-index: 10;
		background-color: #FFFFFF;
	
		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	
		.personal-registration {
			background: #FFD200;
			border-radius: 16rpx;
			width: calc(100% - 20rpx);
			border: 1rpx solid #FFD200;
			padding: 16rpx 0;
			letter-spacing: 2rpx;
			font-weight: 500;
			text-align: center;
			font-family: OPPOSans, OPPOSans;
			font-weight: normal;
			font-size: 28rpx;
			color: #333333;
			font-style: normal;
	
			&.disabled {
				background-color: #E5E5E5;
				color: #818496;
				border: 1rpx solid #E5E5E5;
			}
	
			&.hollowedOut {
				border: 1rpx solid #92C75B;
				color: #92C75B;
				background-color: transparent;
			}
		}
	}

	.school-tips {
		width: 100%;
		padding: 12rpx 16rpx;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		border-radius: 8rpx;
		position: relative;
		display: flex;
		background-color: #fdf6ec;
		color: #e6a23c;

		.school-right {
			width: calc(100% - 28rpx);
			margin-left: 4rpx;
			font-size: 26rpx;

			.tips {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}
		}
	}
</style>